<template>
  <header>
    <!-- logo -->
    <div class="logo-wrap">
      <i class="iconfont icon-logView"></i>
    </div>
    <!-- 前进后退按钮 -->
    <div class="btns-wrap">
      <button class="btn-circle" @click="goTo(-1)">
        <i class="iconfont icon-arrow-left-bold"></i>
      </button>
      <button class="btn-circle" @click="goTo(1)">
        <i class="iconfont icon-arrow-right"></i>
      </button>
    </div>
    <!-- 搜索框 -->
    <head-input></head-input>
    <!-- 头像 -->
    <div class="avatar-wrap" @click="toLogin">
      <el-avatar :size="30" icon="el-icon-user-solid" :src="avatarSrc"></el-avatar>
    </div>
    <!-- 用户登录信息 -->
    <div class="login-info">{{nickname}}</div>
    <button @click="logoutTrigger" v-show="isLogin" class="btn">退出登录</button>
  </header>
</template>

<script>
import { mapState } from 'vuex'
import HeadInput from '@/components/HeadInput/headInput.vue'
export default {
  data () {
    return {
    }
  },
  components: {
    HeadInput
  },
  methods: {
    // 前进后退
    goTo (step) {
      this.$router.go(step)
    },
    toLogin () {
      if (this.isLogin) {
        // 登录就跳转用户页
        this.$router.push(`/userDetail/${this.profile.userId}`)
      } else {
        this.$router.push('/login')
      }
    },
    // 退出登录
    logoutTrigger () {
      const res = confirm('要退出吗')
      if (res) {
        this.$store.dispatch('doLogout')
      }
    }
  },
  computed: {
    /* vuex中登录相关信息 */
    ...mapState(['isLogin', 'account', 'profile', 'playList']),
    // 头像地址
    avatarSrc () {
      return this.isLogin ? this.profile.avatarUrl : ''
    },
    // 昵称
    nickname () {
      return this.isLogin ? this.profile.nickname : '未登录'
    }
  }
}
</script>

<style lang="less" scoped>
// @import '@/assets/less/lessConfig.less'; 为啥引入不了

// 头部
header {
  display: flex;
  align-items: center;
  color: #ffffff;
  background-color: #ec4141;
  width: 100%;
}
// logo
.logo-wrap {
height: 60px;
line-height: 60px;
cursor: pointer;

  .icon-logView {
    font-size: 48px;
  }
}
// 头像
.avatar-wrap {
  border-radius: 10%;
  margin-left: 12px;
  cursor: pointer;
  vertical-align: middle;
  .el-icon-user-solid {
    font-size: 30px;
  }
}

// 用户登录信息
.login-info {
  color: #fff;
  margin-left: 10px;
  font-size: 14px;
}

</style>
